<template>
  <el-dialog
    title="新增广告"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px" v-loading="loading" element-loading-text="正在上传中，请稍等">
      <el-upload
        ref="upload"
        drag
        :data="dataForm"
        :action="url"
        :before-upload="beforeUploadHandle"
        :on-success="successHandle"
        :file-list="fileList"
        :auto-upload="false"
        :on-exceed="onExceed"
        :limit="1"
        :on-progress="onProgress"
        :on-change="onChange"
        style="text-align: center;">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">请上传小于5MB的文件！</div>
      </el-upload>
      <el-form-item label="标题" prop="title">
        <el-input v-model="dataForm.title" placeholder="标题"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="describeInfo">
        <el-input v-model="dataForm.describeInfo" placeholder="描述"></el-input>
      </el-form-item>
      <el-form-item label="跳转URL" prop="hrefUrl">
        <el-input v-model="dataForm.hrefUrl" placeholder="跳转"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submitUpload">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        url: '',
        fileList: [],
        loading: false,
        num: 0,
        dataForm: {
          title: '',
          describeInfo: '',
          hrefUrl: ''
        },
        dataRule: {
          title: [
            { required: true, message: '标题不能为空', trigger: 'blur' }
          ],
          describeInfo: [
            { required: true, message: '描述不能为空', trigger: 'blur' }
          ],
          hrefUrl: [
            { required: true, message: '跳转URL不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      // 初始化表单数据
      init () {
        this.url = this.$http.adornUrl(`/diancan/commonad/upload?token=${this.$cookie.get('token')}`)
        this.visible = true
        this.$nextTick(() => {
          this.$refs.dataForm.resetFields()
        })
      },
      onChange (file, fileList) {
        this.num = fileList.length
      },
      // 上传之前
      onExceed () {
        this.$message.error('一次只能上传一个文件')
      },
      beforeUploadHandle (file) {
        if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
          this.$message.error('只支持jpg、png、gif格式的图片！')
          return false
        }
        let maxSize = 1024 * 1024 * 5
        if (file.size > maxSize) {
          this.$message.error('请上传小于5MB的文件！')
          return false
        }
      },
      // 上传
      submitUpload () {
        if (this.num === 0) {
          this.$message.error('请至少上传一个文件')
        }
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$refs.upload.submit()
          }
        })
      },
      onProgress () {
        this.loading = true
      },
      // 上传成功
      successHandle (response, file, fileList) {
        this.fileList = fileList
        if (response && response.code === 0) {
          this.loading = false
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
              this.fileList = []
            }
          })
        } else {
          this.loading = false
          this.$message.error(response.msg)
        }
      }
    }
  }
</script>
